<template>
    <div class="gray_page">
        <mt-swipe class="swipe" :showIndicators="showPoint">
           <mt-swipe-item v-for="item in shop.pictureList" :key="item.index" >
                <img :src="item.url" alt="" class="banner"/>
                <p class="absolute_shade"></p>
            </mt-swipe-item>
        </mt-swipe>
        <div class="title_box">
            <p class="title">{{seriesName}}</p>
            <p class="price">指导价：<span><strong>￥{{price.minPrice}}~{{price.maxPrice}}万</strong></span></p>
        </div>
        <!-- <div class="action_box">
            活动：<span>预约试驾，付定金1元，购车时能抵扣1000元</span>
        </div>-->

        <div class="share_box">
            <p class="share_btn" @click="share(vkinfo)" v-if="shareactive">分享活动给朋友</p>
        </div>
        <div class="select_box" @click="showSeriesList = !showSeriesList">
            <p class="brand">品牌：{{brandName}}</p>
            <p class="will omit1">意向车款：{{likeCar}}</p>
            <div class="pos_arrow">
                <img src="@/assets/arrow.png"/>
            </div>
        </div>

        <div class="detail_title">
            商品详情
        </div>

       <img :src="shop.detailsUrl" alt="" class="detail_pic" v-if="shop.detailsUrl"/>
      <div class="public_undata" v-if="!shop.detailsUrl">
          <img src="@/assets/icon_car.png" alt="" />
          <p>您还未邀请过客户<br/>赶快去购车商城推荐客户吧!</p>
      </div>
      <p class="padding_40"></p>
      <div class="padding_90"></div>
      <div class="public_bottom_btn_box">
        <p class="public_bottom_btn green" v-if='isShare == 0' @click="goBuy(1)">我要购车</p>
        <p class="public_bottom_btn blue" v-else @click="goBuy()">预约试驾</p>
      </div>
    <transition name="fade">
      <div class="seriesList" v-if="showSeriesList">
        <p class="omit1">{{seriesName}}</p>
        <img src="@/assets/icon_close.png" class="close" @click="showSeriesList = false"/>
        <span class="gray_line_padding"></span>

        <ul>
            <li v-for="series in seriesList" :key="series.id" @click="checkSeries(series.id)">
                <p class="series_title omit1">{{series.type}}</p>
                <p class="series_price">价格：<span><strong>￥{{series.price}}</strong></span></p>
                <img src="@/assets/icon_green.png" class="checkIcon" v-if="series.check"/>
            </li>
        </ul>
      </div>
    </transition>
     <div class="public_shade" v-if="showSeriesList" @click="showSeriesList = false" @touchmove.stop="moveFalse"></div>
    </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import shareClick from '@/utils/share'
import { getCarShopListDetails, sharepage, vktokeninfo } from '@/api/api'
export default {
  name: '',
  data () {
    return {
      seriesName: this.$route.query.seriesName,
      // brands: this.$route.query.brand,
      price: {},
      shop: {},
      showPoint: false,
      seriesList: [],
      brandName: '',
      likeCar: '',
      showSeriesList: false,
      isWx: false,
      ticketValue: '',
      memberId: '',
      saleId: '',
      vkinfo: {},
      shareDatas: {},
      isShare: 0,
      shareactive: true,
      brand: '',
      dealer: '',
      detail: ''
    }
  },
  created () {
    if (location.href.indexOf('isShare=1') > -1) {
      this.isShare = 1
      this.shareactive = false
    } else {
      this.isShare = 0
    }
    this.isWeiXin()
    // this.share()
    this.getToken()
    this.getDetail()
    this.getShare()
  },
  methods: {
    shareClick,
    getCookie (name) {
      var strcookie = document.cookie // 获取cookie字符串
      var arrcookie = strcookie.split(';') // 分割
      // 遍历匹配
      for (var i = 0; i < arrcookie.length; i++) {
        var arr = arrcookie[i].split('=')
        if (arr[0] === name) {
          return arr[1]
        }
      }
      return ''
    },
    getToken () {
      this.ticketValue = this.getCookie('FOTONTGT')
      let tokenparam = {
        ticketName: 'FOTONTGT',
        ticketValue: this.ticketValue,
        isVeeker: '0'
      }
      // 时代微客token
      vktokeninfo(tokenparam).then(res => {
        this.vkinfo = res.data
        this.dealer = res.data.dealerCode
      })
    },
    appShare (datas) {
      let url = location.href
      let memberId = datas.memberId || ''
      let code = datas.dealerCode || ''
      let path = url + `&memberId=${memberId}&dealerCode=${code}` + '&isShare=1'
      this.shareClick('您的好友向您推荐了一款福田汽车', '试驾福田汽车，享更多优惠', path, '', '2')
    },
    isWeiXin () {
      var ua = navigator.userAgent.toLowerCase()
      if (ua.match(/MicroMessenger/i) === 'micromessenger') {
        this.isWx = true
        this.getShare()
      } else {
        this.isWx = false
      }
    },
    getDetail () {
      let param = {
        series: this.seriesName
      }
      getCarShopListDetails(param).then(res => {
        let temInfo = JSON.parse(res.data)
        // console.log(temInfo)
        if (temInfo.pictureList && temInfo.pictureList.length > 1) {
          this.showPoint = true
        }
        for (let i = 0; i < temInfo.typeList.length; i++) {
          temInfo.typeList[i].check = false
          temInfo.typeList[i].id = i + 1
        }
        temInfo.typeList[0].check = true
        this.likeCar = temInfo.typeList[0].type
        this.brandName = temInfo.brandName
        this.seriesList = temInfo.typeList
        this.price = temInfo.priceList[0]
        this.shop = temInfo
      })
    },
    goBuy (type) {
      let path = '/againbuy'
      if (!type) {
        path = '/testDrive'
      }
      this.$router.push({path: path,
        query: {
          seriesName: this.$route.query.seriesName,
          memberId: this.$route.query.memberId,
          dealer: this.$route.query.dealerCode, // 经销商编码
          brand: this.brandName, // 品牌
          detail: this.likeCar // 意向车款
        }})
    },
    share (datas) {
      if (!this.isWx) {
        this.appShare(datas)
      } else {
        this.getShare()
      }
    },
    getShare () {
      let url = location.href
      let urlUtf = encodeURI(url, 'utf-8')
      let param = {
        url: urlUtf,
        memberId: this.vkinfo.memberId,
        series: this.seriesName,
        dealerCode: this.vkinfo.dealerCode
      }
      sharepage(param).then(data => {
        this.shareDatas = data
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appid, // 公众号唯一的标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.noncestr, // 生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: [
            'onMenuShareTimeline', // 分享到朋友圈
            'onMenuShareAppMessage', // 分享给朋友
            'onMenuShareQQ', // 分享到QQ
            'onMenuShareQZone', // 分享到QQ空间
            'showOptionMenu' // 显示菜单
          ]
        })
        wx.ready(function () {
          // 分享给朋友
          wx.onMenuShareAppMessage({
            title: '您的好友向您推荐了一款福田汽车', // 分享标题
            desc: '试驾福田汽车，享更多优惠', // 分享描述
            link: url + '&isShare=1', // 分享链接,将当前登录用户转为puid,以便于发展下线
            imgUrl: data.shareImgUrl, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
              // alert('分享成功')
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
          wx.error(function (res) {
            // alert('errorMSG:' + JSON.stringify(res))
          })
          // 分享到朋友圈
          wx.onMenuShareTimeline({
            title: '您的好友向您推荐了一款福田汽车', // 分享标题
            desc: '试驾福田汽车，享更多优惠', // 分享描述
            link: url + '&isShare=1', // 分享链接,将当前登录用户转为puid,以便于发展下线
            imgUrl: data.shareImgUrl, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
              // alert('分享成功')
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
          wx.error(function (res) {
            // alert('errorMSG:' + JSON.stringify(res))
          })
          // 分享到QQ
          wx.onMenuShareQQ({
            title: '您的好友向您推荐了一款福田汽车', // 分享标题
            desc: '试驾福田汽车，享更多优惠', // 分享描述
            link: url + '&isShare=1', // 分享链接,将当前登录用户转为puid,以便于发展下线
            imgUrl: data.shareImgUrl, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
              // alert('分享成功')
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
          wx.error(function (res) {
            // alert('errorMSG:' + JSON.stringify(res))
          })
          // QQ空间
          wx.onMenuShareQZone({
            title: '您的好友向您推荐了一款福田汽车', // 分享标题
            desc: '试驾福田汽车，享更多优惠', // 分享描述
            link: url + '&isShare=1', // 分享链接,将当前登录用户转为puid,以便于发展下线
            imgUrl: data.shareImgUrl, // 分享图标
            success: function () {
              // addShareLog(data)
            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
          })
        })
      })
    },
    checkSeries (id) {
      this.showSeriesList = false
      for (let i = 0; i < this.seriesList.length; i++) {
        if (id === this.seriesList[i].id) {
          this.seriesList[i].check = true
          this.likeCar = this.seriesList[i].type
        } else {
          this.seriesList[i].check = false
        }
      }
    },
    moveFalse (e) {
      e.preventDefault()
      return false
    },
    closeSeries () {
    }
  }

}
</script>

<style scoped>
    .title_box{
        width:94%;
        height:auto;
        padding:24px 3% 21px;
        background: #fff;
    }
    .title{
        font-size: 26px;
        padding-bottom:16px;
    }

    .price{
        color: #969696;
    }

    .price > span{
        color: #FF6B23;
        font-size: 28px;
    }

    .action_box{
        width:94%;
        height:auto;
        padding:28px 3%;
        background: #FFF0F0;
        line-height: 36px;
    }

    .action_box > span{
        color: #FF3C3C;
    }

    .share_box{
        width:94%;
        height:auto;
        padding:20px 3% 22px;
        background: #fff;
        /* background: #0f0; */
    }

    .share_btn{
        width:200px;
        height:50px;
        border:1px solid #FF6B23;
        color: #FF6B23;
        background: #fff;
        /* border-radius: 6px; */
        line-height: 50px;
        text-align: center;
    }

    .select_box{
        width:96%;
        height:114px;
        background: #fff;
        padding:0 2%;
        margin:10px 0;
        position: relative;
    }

    .brand{
        font-size: 26px;
        color:#403E3E;
        padding-top: 24px;
    }

    .will{
        color: #969696;
        padding-top: 17px;
        width:80%;
    }

    .pos_arrow{
        width:34px;
        height:26px;
        /* background: #f00; */
        position: absolute;
        right:22px;
        bottom:22px;
        border-left:2px solid #c3c3c3;
    }

    .pos_arrow > img{
        width:21px;
        height:12px;
        display: block;
        float: right;
        margin:7px 0 0 0;
    }

    .detail_title{
        width:96%;
        height:70px;
        line-height: 70px;
        padding:0 2%;
        font-size: 26px;
        color: #403E3E;
        background: #fff;
    }

    .detail_pic{
        width:100%;
        height:auto;
        display: block;
        margin-bottom: 6px;
    }

    .seriesList{
        width:100%;
        height:622px;
        background: #fff;
        position: fixed;
        left:0;
        bottom:0;
        z-index: 999;
    }

    .seriesList > p{
        width:70%;
        height:84px;
        line-height: 84px;
        float: left;
        margin-left:3%;
    }

    .close{
        width:25px;
        height:25px;
        float: right;
        margin:30px 3% 0 0;
    }

    .gray_line_padding{
        width:100%;
        height:10px;
        background: #efefef;
        clear: both;
        display:block;
    }

    .seriesList > ul{
        width:100%;
        height:500px;
        overflow: scroll;
    }

    .seriesList > ul > li{
        width:94%;
        padding:0 3%;
        height:130px;
        border-bottom: 1px solid #e7e7e7;
        font-size: 28px;
        position: relative;
    }

    .series_title{
        width:85%;
        padding:32px 0 19px 0;
        color: #403E3E;
    }

    .series_price{
        color:#969696;
    }

    .series_price > span{
        color: #FF6B23;
    }

    .checkIcon{
        width:38px;
        height:38px;
        position: absolute;
        right:3%;
        top:40px;
    }
    .public_bottom_btn{
    width:100%;
    height:90px;
    line-height: 90px;
    float: left;
    color: #fff;
    font-size: 32px;
    text-align: center;
    }
    .blue{
    background: #009CFF
    }
</style>
